<!--受理详情-->
<style scoped lang="less">
.app-class {
  .dt-head-fix {
    padding-bottom:0.2rem;
    background-color: #f5f5f5;
    top: 0px;
  }
}
.detail-goods-list{
  padding-right:0.2rem;
  .list-goods-warp {
    .pic {
      margin: auto 10px auto 0;
    }
  }
}

</style>

<template> 
  <div class="contain">
    <div class="dt-head-fix">
      <order-header :data="data" @on-render="getHeight"></order-header>
    </div>
    
    <div class="detail-customs mb30" v-if="ExceptionData" :style="{marginTop:topH}">
      <p>异常原因：{{ExceptionData.ExceptionMemo && ExceptionData.ExceptionMemo !== ''?ExceptionData.ExceptionMemo:ExceptionData.Information}}</p>
      <p>记录时间：{{ExceptionData.CreateTime | time}}</p>
    </div>

    <div class="detail-goods-list" :style="{marginTop:(ExceptionData?'0px':topH)}">
      <div class="detail-supply">
        <i class="iconfont icon-supplier"></i> {{data.CargoOwnerName}}
      </div>

      <div class="list-goods-warp" v-for="item in data.Trtplbbdetail">
        <div class="displayflex">
          <div class="pic">
            <img :src="item.PictContent | filterImgUrl">
          </div>
          <div class="msg flex1">
            <p class="ft17">{{item.GoodsName}}</p>
            <p>规格：{{item.GoodsSpec}}</p>
            <p>商品编码：{{item.GoodsCode}}</p>
            <p>生产厂商：{{item.Producer}}</p>
            <em class="def-color">
              共<span class="red">{{item.Pkgs}}</span>件
            </em>
          </div>
        </div>
      </div>
      
      <p class="detail-mark ft17">
        <em class="ft17">备注留言：</em>
        <i class="gray">{{data.Memo || '无'}}</i>
      </p>
      <div class="detail-num">
        <em>共 <span class="red">{{data.Trtplbbdetail.length}}</span> 种商品</em>
      </div>
    </div>

    <div class="detail-customs mb30">
      <p>要求到货日期：{{data.LastArrivalArrivedDate | time}}</p>
      <p>下单时间：{{data.BillDate | time}}</p>
    </div>

    <uploader :title="'提货凭证'" :img-list="Img52" :max="0" v-if="Img52.length > 0"></uploader>
    <uploader :title="'交货凭证'" :img-list="Img56" :max="0" v-if="Img56.length > 0"></uploader>
    <uploader :title="'签收凭证'" :img-list="Img81" :max="0" v-if="Img81.length > 0"></uploader>


    <div class="detail-bottom displayflex">
      <!-- ￥{{(amount || data.DetailSum) | fmoney}} -->
      <span>合计：<em class="red">{{TotalPkgs}}</em>件</span>
      <div class="flex1 btn-grp">
        <!-- <div class="btn">受理</div> -->
      </div>
    </div>

  </div>
</template>

<script>
import orderHeader from "@/components/core/header/order_detail_header.vue";
import uploader from '@/components/share/imageUploader/imageUploader.vue';

export default {
  name: "orderDetail",
  components: {
    orderHeader,
    uploader
  },
  data() {
    return {
      topH: '',
      data: {
        Trtplbbdetail:[],
      },
      ExceptionData:null,
      Img52: [],
      Img56: [],
      Img81: [],
    };
  },
  computed: {
    userinfo() {
      return localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')) : null;
    },
    TotalPkgs() {
      let total = 0;
      this.data.Trtplbbdetail.forEach(x => {
        total += x.Pkgs;
      });
      return total;
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.$nextTick(function() {
    });
  },
  methods: {    
    //获取详情
    getData() {
      let query = {
        Guid: this.$route.query.BBGuid,
        TenantGuid: this.userinfo.TenantGuid,
        CorpGuid: this.userinfo.CorpGuid,
      };
      this.Ajax.post("getOrderDetail", query).then((res) => {
        if (res.IsSuccess) {
          this.data = res.Data;
          if(res.Data.TLTransExcepRecord && res.Data.TLTransExcepRecord.length > 0){
            this.ExceptionData = res.Data.TLTransExcepRecord[0];
          }

          this.data.HandoverList.forEach((x, i) => {
            let Obj = {},
                Json = [];
            Obj = x.HandoverPict !== '' && x.HandoverPict?JSON.parse(x.HandoverPict):{};
            if(Object.keys(Obj).length > 0){
              Json = Json.concat(Obj.bbill?Obj.bbill : []);
              Json = Json.concat(Obj.platenumber?Obj.platenumber : []);
              Json = Json.concat(Obj.invoice?Obj.invoice : []);
              Json = Json.concat(Obj.logistics?Obj.logistics : []);
              switch(x.HandoverType){
                case '1':
                  this.Img52 = Json;
                  break;
                case '2':
                  this.Img56 = Json;
                  break;
                case '3':
                  this.Img81 = Json;
                  break;
              }
            }
          });


        } else {
          this.Toast({
            message: res.ErrorMessage || "操作失败，请稍后重试"
          });
        }
      });
    },
    getHeight(val){
      this.topH = `${val + 10}px`;
    }
  },
};
</script>